<!DOCTYPE html>
<html lang="UTF-8" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="stylesheet" th:href="@{/static/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/static/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/static/css/main.css}">
    <link rel="stylesheet" th:href="@{/static/css/pagination.css}">
    <style>
        .tree li {
            list-style-type: none;
            cursor: pointer;
        }

        table tbody tr:nth-child(odd) {
            background: #F4F4F4;
        }

        table tbody td:nth-child(even) {
            color: #C00;
        }
    </style>
</head>

<body>

<div th:insert="head :: copy"></div>
<div th:insert="SideNav.html :: copy"></div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title"><i class="glyphicon glyphicon-th"></i> 数据列表</h3>
        </div>
        <div class="panel-body">
            <form class="form-inline" role="form" style="float:left;">
                <div class="form-group has-feedback">
                    <div class="input-group">
                        <div class="input-group-addon">查询条件</div>
                        <input id="keywordInput" class="form-control has-success" type="text" placeholder="请输入查询条件">
                    </div>
                </div>
                <button id="but" type="button" class="btn btn-warning"><i class="glyphicon glyphicon-search"></i> 查询
                </button>
            </form>
            <button type="button" class="btn btn-danger" data-toggle="modal" data-targer="#addModal" id="deleModal" style="float:right;margin-left:10px;"><i
                    class=" glyphicon glyphicon-remove"></i> 删除
            </button>
            <button type="button" data-toggle="modal" data-targer="#deleteModal" id="showAdd" class="btn btn-primary"
                    style="float:right;"><i class="glyphicon glyphicon-plus"></i> 新增
            </button>
            <br>
            <hr style="clear:both;">
            <div class="table-responsive">
                <table class="table  table-bordered">
                    <thead>
                    <tr>
                        <th width="30">#</th>
                        <th width="30"><input id="boxsum" type="checkbox"></th>
                        <th>名称</th>
                        <th width="100">操作</th>
                    </tr>
                    </thead>
                    <tbody id="rolePageBody">
                    </tbody>
                    <tfoot>
                    <tr>
                        <td colspan="6" align="center">
                            <div id="Pagination" class="pagination"></div>
                        </td>
                    </tr>

                    </tfoot>
                </table>
            </div>
        </div>
    </div>
</div>
</div>
</div>

<div id="addModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">尚筹网系统弹窗</h4>
            </div>
            <div class="modal-body">
                <form class="form-signin" role="form">
                    <div class="form-group has-success has-feedback">
                        <input
                                type="text" name="roleName"
                                class="form-control" placeholder="请输入角色名称"
                                autofocus>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button id="saveRoleBtn" type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>

<div id="updateModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">尚筹网系统弹窗</h4>
            </div>
            <div class="modal-body">
                <form class="form-signin" role="form">
                    <div class="form-group has-success has-feedback">
                        <input
                                type="text" name="roleName"
                                class="form-control" placeholder="请输入角色名称"
                                autofocus>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button id="updateRoleBtn" type="button" class="btn btn-primary">修改</button>
            </div>
        </div>
    </div>
</div>
<div id="deleteModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">尚筹网系统弹窗</h4>
            </div>
            <div class="modal-body">
                <form class="form-signin" role="form">
                    <div class="modal-body">
                        您真的要删除这个节点吗？
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button id="deleteRoleBtn" type="button" class="btn btn-primary">确定删除</button>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/static/js/jquery-2.1.1.min.js}"></script>
<script th:src="@{/static/bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{/static/script/docs.min.js}"></script>
<script th:src="@{/static/js/jquery.pagination.js}"></script>
<script th:src="@{/static/myjs/myRole.js}"></script>
<script th:src="@{/static/layer/layer.js}"></script>

<script type="text/javascript">
    $(function () {
        $(".list-group-item").click(function () {
            if ($(this).find("ul")) {
                $(this).toggleClass("tree-closed");
                if ($(this).hasClass("tree-closed")) {
                    $("ul", this).hide("fast");
                } else {
                    $("ul", this).show("fast");
                }
            }
        });
    });

    $("tbody .btn-success").click(function () {
        window.location.href = "assignPermission.html";
    });
</script>

<script>
    $(function () {
        window.pageNum = 1;
        window.pageSize = 5;
        window.keyword = "";
        generatePage();

        $("#but").click(function () {
            window.keyword = $("#keywordInput").val();
            generatePage();
        });


        $("#showAdd").click(function () {
            $("#addModal").modal("show");
        });

        $("#saveRoleBtn").click(function () {
            let roleName = $("#addModal [name=roleName]").val();
            alert(roleName)
            $.ajax({
                url: "./add",
                method: "post",
                data: {
                    name: roleName,
                },
                dataType: "json",
                success: function (res) {
                    var result = res.result;
                    if (result == "SUSSESS") {
                        layer.msg("操作成功");
                    }
                    if (result == "FAILED") {
                        layer.msg("操作失败" + res.message);
                    }
                },
                error: function (res) {
                    layer.msg(res.status + " " + res.statusText)
                }
            });
            $("#addModal").modal("hide");
            $("#showAdd[name=roleName]").val("");
            generatePage();
        });

        // $(".pencilBtn").click(function () {
        //     $("#updateModal").modal("show");
        // })

        $("#rolePageBody").on("click", ".pencilBtn", function () {
            $("#updateModal").modal("show");
            var roleName = $(this).parent().prev().text();
            window.id = this.id;
            $("#updateModal [name=roleName]").val(roleName);
        });

        $("#updateRoleBtn").click(function () {
            var roleName = $("#updateModal [name=roleName]").val();
            $.ajax({
                url: "./update",
                method: "post",
                data: {
                    id: window.id,
                    name: roleName
                },
                dataType: "json",
                success: function (res) {
                    var result = res.result;
                    if (result == "SUSSESS") {
                        layer.msg("操作成功");
                    }
                    if (result == "FAILED") {
                        layer.msg("操作失败" + res.message);
                    }
                    generatePage();
                },
                error: function (res) {
                    layer.msg(res.status + " " + res.statusText)
                },
            });
            $("#updateModal").modal("hide");

        });

        $("#deleteRoleBtn").click(function () {
            console.log(window.roleIdArray)
            var requestBody = JSON.stringify(window.roleIdArray);
            console.log(requestBody)
            $.ajax({
                url:"./delete",
                method:"post",
                data:requestBody,
                contentType:"application/json;charset=UTF-8",
                dataType:"json",
                success: function (res) {
                    var result = res.result;
                    if (result == "SUSSESS") {
                        layer.msg("操作成功");
                    }
                    if (result == "FAILED") {
                        layer.msg("操作失败" + res.message);
                    }
                    generatePage();
                },
                error: function (res) {
                    layer.msg(res.status + " " + res.statusText)
                },
            });
            $("#deleteModal").modal("hide");
        });

        $("#rolePageBody").on("click", ".removeBtn", function () {
            var roleName = $(this).parent().prev().text();
            var roleArray = [{
                roleId:this.id,
                roleName:roleName,
            }]
            showConfirmModal(roleArray);

        });

        $("#boxsum").click(function () {
            var currentStatus = this.checked;

            $(".itemBox").prop("checked",currentStatus);

        });

        $("#rolePageBody").on("click", ".itemBox", function () {
            var checkBoxCount = $(".itemBox:checked").length;

            var totalBoxCount = $(".itemBox").length;

            $("#boxsum").prop("checked",checkBoxCount == totalBoxCount);
        });

        $("#deleModal").click(function () {
            var roleArray = [];
            $(".itemBox:checked").each(function () {
                var roleId = this.id;
                var roleName = $(this).parent().next().text();
                roleArray.push({
                    roleId:roleId,
                    roleName:roleName,
                });
            })
            if (roleArray.length == 0){
                layer.msg("请选择一个删除的选项");
                return;
            }
            showConfirmModal(roleArray);
        });
    })
</script>
</body>
</html>
